// 销售中 已分配客户列表

// import React from 'react'

// export default function already() {
//   return (
//     <div>
//       销售中 已分配客户列表
//     </div>
//   )
// }

import React, { useEffect, useState, useRef } from 'react'
import { Button, Input, Table, Modal, Select, Tabs, Space, DatePicker } from 'antd'
import "./already.less"
// 拖拽
import { Resizable } from 'react-resizable'

// Modal的拖动
import Draggable from 'react-draggable';

const { Search } = Input;
const { RangePicker } = DatePicker;

export default function already() {

    const [disabled, setDisabled] = useState(false);
    const onSearch = (value: string) => console.log(value);

    // 拖拽的
    const [dcolumns, setDcolumns] = useState([]);
    const [components, setComponents] = useState({});

    // 查看日志的Modal框
    const [daily, setDaily] = useState(false);
    // 过滤的Modal框
    const [filter, setFilter] = useState(false)
    // 提示对话框
    const [tishi, setTishi] = useState(false)

    const defaultColumns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: "id",
            width: 80,
        },
        {
            title: '客户编号',
            dataIndex: 'bianhao',
            key: "bianhao",
            width: 180,
            render: (record) => {
                return < a href=" ">{record}</ a>
            }
        },
        {
            title: '客户名称',
            dataIndex: 'customer',
            key: "customer",
            width: 180,
            render: (record) => {
                return < a href=" ">{record}</ a>
            }
        },
        {
            title: '所在省份',
            dataIndex: 'province',
            key: "province",
            width: 80,
        },
        {
            title: '所在市区',
            dataIndex: 'city',
            key: "city",
            width: 80,
        },
        {
            title: '联系人姓名',
            dataIndex: 'username',
            key: "username",
            width: 120,
        },
        {
            title: '领用人员',
            dataIndex: 'people',
            key: "people",
            width: 120,
            render: (record) => {
                return < a href=" ">{record}</ a>
            }
        },
        {
            title: '领用时间',
            dataIndex: 'time',
            key: "time",
            width: 180,
            filters: [
                {
                    text: 'London',
                    value: 'London',
                },
                {
                    text: 'New York',
                    value: 'New York',
                },
            ],
            onFilter: (value, record) => record.address.indexOf(value) === 0,
        },
        {
            title: '',
            key: 'action',
            width: 180,
            render: (_, record) => (
                <Space size="middle">
                    <Button>取消公用</Button>
                    <Button>回收</Button>
                </Space>
            ),
        },
    ];
    const dataSource = [
        {
            key: '1',
            id: 1,
            bianhao: '02003',
            customer: "浙江众鑫超市",
            province:"广西省",
            city:"桂林市",
            username:"张云龙",
            people:"",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },

        {
            key: '2',
            id: 2,
            bianhao: '02004',
            customer: "浙江众鑫超市",
            province:"广西省",
            city:"桂林市",
            username:"黄磊",
            people:"",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
        {
            key: '3',
            id: 3,
            bianhao: '02006',
            customer: "青岛海陵公司",
            province:"广西省",
            city:"桂林市",
            username:"侯海",
            people:"张妍",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
        {
            key: '4',
            id: 4,
            bianhao: '02015',
            customer: "北京天得工程",
            province:"广西省",
            city:"桂林市",
            username:"哈哈哈",
            people:"钟凯",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
        {
            key: '5',
            id: 5,
            bianhao: '03025',
            customer: "四川供暖公司",
            province:"广西省",
            city:"桂林市",
            username:"张云龙",
            people:"",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
        {
            key: '6',
            id: 6,
            bianhao: '02003',
            customer: "陕西集团",
            province:"河北省",
            city:"邯郸市",
            username:"张云龙",
            people:"",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
        {
            key: '7',
            id: 7,
            bianhao: '02003',
            customer: "黑龙江强生集团",
            province:"山东省",
            city:"聊城市",
            username:"张云龙",
            people:"张妍",
            time: '2022-07-18 11:15',
            man: "",
            content: "电话咨询"
        },
    ];

    const data_Modal = [
        {
            key: '1',
            id: 1,
            user: '张妍',
            caozuo: "浏览报表",
            display: 'PC',
            time: "2023/2/3/14:56:52"
        },
        {
            key: '1',
            id: 2,
            user: '张妍',
            caozuo: "浏览报表",
            display: 'PC',
            time: "2023/2/3/14:56:52"
        },
        {
            key: '3',
            id: 3,
            user: '张妍',
            caozuo: "浏览报表",
            display: 'PC',
            time: "2023/2/3/14:56:52"
        },
        {
            key: '4',
            id: 4,
            user: '张妍',
            caozuo: "浏览报表",
            display: 'PC',
            time: "2023/2/3/14:56:52"
        },
        {
            key: '5',
            id: 5,
            user: '张妍',
            caozuo: "浏览报表",
            display: 'PC',
            time: "2023/2/3/14:56:52"
        },
    ]

    const columns_Modal = [
        {
            title: '序号',
            dataIndex: 'id',
            key: "id",
            // width: 80
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: "user",
            width: 80,
            render: (record) => {
                return < a href=" ">{record}</ a>
            }

        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            key: "caozuo",
            width: 100
        },
        {
            title: '操作来源',
            dataIndex: 'display',
            key: "display",
            width: 100
        },
        {
            title: '时间',
            dataIndex: 'time',
            // key: "time",
        },
    ]

    // 第二个Modal--filter过滤的信息
    const columns_filter = [
        {
            title: '序号',
            dataIndex: 'id',
            key: "id",
            width: 50
        },
        {
            title: '查询方案',
            dataIndex: 'user',
            key: "user",
            width: 100,
        },
    ]
    const [data_filter] = useState([])



    // 拖拽开始的相关东西
    useEffect(() => {
        setDcolumns(defaultColumns);
        setComponents({
            header: {
                cell: ResizeableTitle
            }
        });
    }, []);

    const ResizeableTitle = (props) => {
        // console.log('props', props);
        const { onResize, width = 100, ...restProps } = props;
        if (!width) {
            return <th {...restProps} />
        }

        return (
            <Resizable width={width} height={0} onResize={onResize}  >
                <th {...restProps} />
            </Resizable>
        )
    }
    const handleResize = index => (e, { size }) => {
        // console.log('size', size);
        const nextColumns = [...columns];
        nextColumns[index] = {
            ...nextColumns[index],
            width: size.width
        }
        setDcolumns(nextColumns);
    };

    const columns = dcolumns.map((col, index) => ({
        ...col,
        onHeaderCell: column => ({
            width: col.width || 100, // 100 没有设置宽度可以在此写死 例如100试下
            onResize: handleResize(index),
        }),
    }));
    /* 拖拽截至 */


    // 全选
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };

    // tab查询条件切换
    const items = [
        {
            key: '1',
            label: `查询条件`,
            children: ``,
        },
        {
            key: '2',
            label: `分组设置`,
            children: `${1111
                }`,
        },
    ];
    const div = useRef(null)
    const onChange = (key) => {
        if (key == 2) {
            div.current.style.display = 'none';
        }
        else {
            div.current.style.display = ''
        }
    };

    // 下拉
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };

    // Modal的拖动开始
    const [bounds, setBounds] = useState({
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
    });

    const draggleRef = useRef(null);

    const onStart = (_event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };
    // Modal的拖动截至

    return (
        <div className='tableinfo'>
            <div className="table_tab">
                <Button>新增</Button>
                <Button>修改</Button>
                <Button onClick={() => { setFilter(true) }}>过滤</Button>
                <Button onClick={() => { window.location.reload() }}>还原</Button>
                {/* 下拉 */}
                <div className="text1">
                    <span>打印:</span>
                    <select className="selectClass">
                        <option>打印设置</option>
                        <option>打印报表</option>
                        <option>批打单据</option>
                    </select>
                    <div className="dropDownArrow"></div>
                </div>
                <Button>导入</Button>
                <Button>导出</Button>
                <Button onClick={() => { setDaily(true) }}>查看日志</Button>

            </div>
            <div className="table_input">
                <div className="text1">
                    <span>领用人：</span>
                    <Search placeholder="请选择或输入" onSearch={onSearch} style={{ width: 200 }} />
                </div>
                <div className="text1">
                    <span>公开人：</span>
                    <Search placeholder="请选择或输入" onSearch={onSearch} style={{ width: 200 }} />
                </div>
                <div className="text1">
                    <span>领用时间：</span>
                    <RangePicker />
                </div>
                <div className="text1">
                    <span>客户名称：</span>
                    <Search placeholder="请选择或输入" onSearch={onSearch} style={{ width: 200 }} />
                </div>
            </div>
            <div className="table_input2">
                <div className="text1">
                    <span>领用状态：</span>
                    <Select
                        defaultValue="全部"
                        style={{
                            width: 200,
                        }}
                        onChange={handleChange}
                        options={[
                            {
                                value: '全部',
                                label: '全部',
                            },
                            {
                                value: '待审批',
                                label: '待审批',
                            },
                            {
                                value: '公用',
                                label: '公用',
                            },
                            {
                                value: '未领用',
                                label: '未领用',
                            },
                            {
                                value: '已领用',
                                label: '已领用',
                            },
                        ]}
                    />
                </div>
                <Button>查询</Button>
            </div>
            <div className="table_conent">
                <p>已分配客户列表</p>
            </div>
            {/* 表格 */}
            <div className='table'>
                <Table
                    rowSelection={{
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                    scroll={{ x: 1400, y: 300 }}
                    bordered={true}
                    components={components}
                    onRow={(record) => {
                        return {
                            onClick: (event) => { }, // 点击行
                            onDoubleClick: (event) => { },
                            onContextMenu: (event) => { },
                            onMouseEnter: (event) => { }, // 鼠标移入行
                            onMouseLeave: (event) => { },
                        };
                    }}
                    onHeaderRow={(columns, index) => {
                        return {
                            onClick: () => { }, // 点击表头行
                        };
                    }}
                />
            </div>
            {/* 分页底部 */}
            <div className="footer">
                <div className="footer_left">
                    <a className='iconfont icon-arrow-double-left' ></a>
                    <a className='iconfont icon-arrow-left-bold'  ></a>
                    <div className='iconfont icon-shuxian'></div>
                    <span>第</span>
                    <input type="text" defaultValue="1" />
                    <span>页,</span>
                    <span>共 1 页</span>
                    <div className='iconfont icon-shuxian'></div>
                    <a className='iconfont icon-arrow-right-bold' ></a>
                    <a className='iconfont icon-arrow-double-right' ></a>
                </div>
                <div className="footer_right">
                    显示1-10条,共10条
                </div>

                {/* 过滤的Modal框 */}
                <Modal
                    title={
                        <div
                            style={{
                                width: '100%',
                                cursor: 'move',
                            }}
                            onMouseOver={() => {
                                if (disabled) {
                                    setDisabled(false);
                                }
                            }}
                            onMouseOut={() => {
                                setDisabled(true);
                            }}
                            onBlur={() => { }}
                        // end
                        >
                            查询条件
                        </div>
                    }
                    open={filter}
                    onOk={() => { setFilter(false) }}
                    onCancel={() => { setFilter(false) }}
                    footer={[]}
                    maskClosable={false}
                    // 拖动
                    modalRender={(modal) => (
                        <Draggable
                            disabled={disabled}
                            bounds={bounds}
                            onStart={(event, uiData) => onStart(event, uiData)}
                        >
                            <div ref={draggleRef}>{modal}</div>
                        </Draggable>
                    )}
                >
                    <div className="modalFilter_top">
                        <Button>确定</Button>
                        <Button>取消</Button>
                        <Button onClick={() => { setTishi(true) }}>保存方案</Button>
                        <Button onClick={() => { setTishi(true) }}>删除方案</Button>
                    </div>
                    <div className="modalFilter_middle">
                        <div className="middle_left">
                            <Table
                                rowSelection={{
                                    ...rowSelection,
                                }}
                                columns={columns_filter}
                                dataSource={data_filter}
                                pagination={false}
                                bordered={true}
                                rowKey="_id"
                            />
                        </div>
                        <div className="middle_right">
                            <div className="info">
                                <Tabs defaultActiveKey="1" items={items} onChange={onChange} ></Tabs>
                                <div ref={div}>
                                    <p >
                                        <span>查询方案：</span>
                                        <Input />
                                    </p>
                                    <p>
                                        <span>关联项目：</span>
                                        <Input />
                                    </p>
                                    <p>
                                        <span >合同名称：</span>
                                        <Input placeholder="请选择或输入" />
                                    </p>
                                    <p>
                                        <span>客户名称：</span>
                                        <Input placeholder="请选择或输入" />
                                    </p>
                                    <p>
                                        <span>销售人员：</span>
                                        <Input placeholder="请选择或输入" />
                                    </p>
                                    <p>
                                        <span>发货状态：</span>
                                        <Input />
                                    </p>
                                    <p>
                                        <span>出库状态：</span>
                                        <Input />
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </Modal>

                {/* 查看日志的Modal框 */}
                <Modal
                    title={
                        <div
                            style={{
                                width: '100%',
                                cursor: 'move',
                            }}
                            onMouseOver={() => {
                                if (disabled) {
                                    setDisabled(false);
                                }
                            }}
                            onMouseOut={() => {
                                setDisabled(true);
                            }}
                            onFocus={() => { }}
                            onBlur={() => { }}
                        >
                            查看日志
                        </div>
                    }
                    open={daily}
                    onOk={() => { setDaily(false) }}
                    onCancel={() => { setDaily(false) }}
                    footer={[]}
                    maskClosable={false}

                    // 拖动
                    modalRender={(modal) => (
                        <Draggable
                            disabled={disabled}
                            bounds={bounds}
                            onStart={(event, uiData) => onStart(event, uiData)}
                        >
                            <div ref={draggleRef}>{modal}</div>
                        </Draggable>
                    )}

                >
                    <div className="modal_tap">
                        <div className="left">
                            <span>用户：</span>
                            <Select
                                defaultValue="全部"
                                style={{
                                    width: 120,
                                }}
                                listHeight={200}
                                // onChange={handleChange}
                                options={[
                                    {
                                        value: '全部',
                                        label: '全部',
                                    },
                                    {
                                        value: '陈红飞',
                                        label: '陈红飞',
                                    },
                                    {
                                        value: '陈凯名',
                                        label: '陈凯名',
                                    },
                                    {
                                        value: '程溪',
                                        label: '程溪',
                                    },
                                    {
                                        value: '陈元',
                                        label: '陈元',
                                    },
                                    {
                                        value: '方可心',
                                        label: '方可心',
                                    },
                                    {
                                        value: '张三',
                                        label: '张三',
                                    },
                                    {
                                        value: '张妍',
                                        label: '张妍',
                                    },
                                ]}
                            />

                        </div>
                        <div className="middle">
                            <span>用户：</span>
                            <Select
                                defaultValue="全部"
                                style={{
                                    width: 120,
                                }}
                                listHeight={200}
                                // onChange={handleChange}
                                options={[
                                    {
                                        value: '全部',
                                        label: '全部',
                                    },
                                    {
                                        value: '浏览报表',
                                        label: '浏览报表',
                                    },
                                    {
                                        value: '报表打印设置',
                                        label: '报表打印设置',
                                    },
                                    {
                                        value: '打印报表',
                                        label: '打印报表',
                                    },
                                    {
                                        value: '导出报表',
                                        label: '导出报表',
                                    },
                                ]}
                            />

                        </div>
                        <div className="right">
                            <Button>查询</Button>
                        </div>
                    </div>
                    <div className="modal_table">
                        {/* 表格 */}
                        <div className='table'>
                            <Table
                                columns={columns_Modal}
                                dataSource={data_Modal}
                                pagination={false}
                                scroll={{ x: 600, y: 240 }}
                                bordered={true}
                                components={components}
                                onHeaderRow={(columns, index) => {
                                    return {
                                        onClick: () => { }, // 点击表头行
                                    };
                                }}
                            />
                        </div>
                        {/* 分页底部 */}
                        <div className="footer">
                            <div className="footer_left">
                                <a className='iconfont icon-arrow-double-left' ></a>
                                <a className='iconfont icon-arrow-left-bold'  ></a>
                                <div className='iconfont icon-shuxian'></div>
                                <span>第</span>
                                <input type="text" defaultValue="1" />
                                <span>页,</span>
                                <span>共 392 页</span>
                                <div className='iconfont icon-shuxian'></div>
                                <a className='iconfont icon-arrow-right-bold' ></a>
                                <a className='iconfont icon-arrow-double-right' ></a>
                            </div>
                            <div className="footer_right">
                                显示1-15条,共5872条
                            </div>

                        </div>
                    </div>
                </Modal>

                {/* 提示对话框 */}
                <Modal
                    className='modalTishi'
                    title={
                        <div
                            style={{
                                width: '100%',
                                cursor: 'move',
                            }}
                            onMouseOver={() => {
                                if (disabled) {
                                    setDisabled(false);
                                }
                            }}
                            onMouseOut={() => {
                                setDisabled(true);
                            }}
                            onFocus={() => { }}
                            onBlur={() => { }}
                        // end
                        >
                            提示对话框
                        </div>
                    }
                    open={tishi}
                    onOk={() => { setTishi(false) }}
                    onCancel={() => { setTishi(false) }}
                    footer={[]}
                    maskClosable={false}

                    // 拖动
                    modalRender={(modal) => (
                        <Draggable
                            disabled={disabled}
                            bounds={bounds}
                            onStart={(event, uiData) => onStart(event, uiData)}
                        >
                            <div ref={draggleRef}>{modal}</div>
                        </Draggable>
                    )}
                >
                    <div className="content">
                        <svg t="1675414772935" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16954" width="200" height="200"><path d="M512 524.8m-416 0a416 416 0 1 0 832 0 416 416 0 1 0-832 0Z" fill="#5B8FD9" p-id="16955"></path><path d="M512 435.2c-19.2 0-38.4 19.2-38.4 38.4V768c0 19.2 19.2 38.4 38.4 38.4s38.4-19.2 38.4-38.4V473.6c0-19.2-19.2-38.4-38.4-38.4z" fill="#FFFFFF" p-id="16956"></path><path d="M512 300.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#FFFFFF" p-id="16957"></path></svg>
                        <p>请输入方案名称!</p>
                    </div>
                    <button onClick={() => { setTishi(false) }}>确定</button>
                </Modal>
            </div>
        </div>
    )
}
